<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{margin: 0;padding: 0;}
    h2{margin: 100px;}
    .bBox{
      position: relative;
    }
    .box{
      width:100px;height:100px;
      padding: 10px; 
      border: solid 20px black;
      margin: 30px;
      position: absolute;
      left:40px;top:40px;
      overflow: auto;
    }
  </style>
</head>
<body>
  <h2>13123</h2>
  <div class="bBox">
    <div class="box">
      这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这文字
    </div>
  </div>
</body>
<script>

  var box = document.querySelector(".box")

  // 主要用于获取各种尺寸

  // cont+padding
  console.log( box.clientWidth , box.clientHeight );
  // cont+padding+border
  console.log( box.offsetWidth , box.offsetHeight );
  // cont+padding+溢出
  console.log( box.scrollWidth , box.scrollHeight );

  // 当前元素相对于包含块的偏移的距离
  console.log( box.offsetLeft, box.offsetTop );

  // 获取包含块元素
  console.log( box.offsetParent );


  // 包含块：距离当前元素最近的一个具有定位的父级，如果不存在这样的父级，那就是根元素
  
</script>
</html>